<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-写作突破-学习报告'"> </Breadcrumb>
        <RouterTabs :list="routerList" :current="3"> </RouterTabs>
        <view class="content">
          <view class="box">
            <view class="tabs">
              <view
                class="tabs_item"
                :class="{ active: type === '1' }"
                @click="typeChange('1')"
              >
                <text>亮点词汇</text>
              </view>
              <view
                class="tabs_item"
                :class="{ active: type === '2' }"
                @click="typeChange('2')"
              >
                <text>亮点句型</text>
              </view>
            </view>
            <view class="list">
              <view class="item" v-show="type === '1'">
                <view class="table">
                  <u-table
                    bg-color="rgba(39, 191, 241, 0.3)"
                    border-color="#ffffff"
                    font-size="28"
                    color="#ffffff"
                    padding="0 0"
                  >
                    <u-tr>
                      <u-th>学段名称</u-th>
                      <u-th width="25%">学段类型</u-th>
                      <u-th>总量</u-th>
                      <u-th>生词本</u-th>
                      <u-th>备忘录</u-th>
                    </u-tr>
                    <u-tr v-for="(item, index) in tableList" :key="index">
                      <u-td>{{ item.periodName }}</u-td>
                      <u-td width="25%">{{ item.typeName }}</u-td>
                      <u-td>{{ item.wordNum }}</u-td>
                      <u-td>{{ item.wordNewNum }}</u-td>
                      <u-td>{{ item.wordMemoNum }}</u-td>
                    </u-tr>
                  </u-table>
                </view>
              </view>
              <view class="item" v-show="type === '2'">
                <view class="table">
                  <u-table
                    bg-color="rgba(39, 191, 241, 0.3)"
                    border-color="#ffffff"
                    font-size="28"
                    color="#ffffff"
                    padding="0 0"
                  >
                    <u-tr>
                      <u-th>学段名称</u-th>
                      <u-th width="25%">学段类型</u-th>
                      <u-th>总量</u-th>
                      <u-th>错题本</u-th>
                      <u-th>备忘录</u-th>
                    </u-tr>
                    <u-tr v-for="(item, index) in tableList" :key="index">
                      <u-td>{{ item.periodName }}</u-td>
                      <u-td width="25%">{{ item.typeName }}</u-td>
                      <u-td>{{ item.sentenceNum }}</u-td>
                      <u-td>{{ item.sentenceWrongNum }}</u-td>
                      <u-td>{{ item.sentenceMemoNum }}</u-td>
                    </u-tr>
                  </u-table>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { writingReport } from "@/api/composition";
export default {
  components: {},
  data() {
    return {
      routerList: [
        {
          name: "攻略/模版",
          url: "pages/composition/compositionStrategy",
        },
        {
          name: "点亮单词/短语",
          url: "pages/composition/compositionPhrase",
        },
        {
          name: "亮点句型",
          url: "pages/composition/compositionSentence",
        },
        {
          name: "学习报告",
          url: "pages/composition/compositionReport",
        },
      ],
      type: "1",
      tableList: [],
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      writingReport().then((res) => {
        this.tableList = res.data;
      });
    },
    typeChange(type) {
      this.type = type;
    },
  },
};
</script>
<style scoped lang="scss">
@import "./compositionReport";
</style>
